<template>
  <view class="containerSp">
    <view v-for="(item, index) in propsitemList" :key="item.id">
      <view style="margin-bottom: 10rpx;margin-top: 10rpx;display: flex;">
        <view v-if="item.props.required" style="color: red;margin-right: 5rpx;">*</view>
        <view>{{ item.title }}</view>
      </view>
      <TextInput :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'TextInput'"
        :placeholder='`请输入${item.title}`' :title="item.title" :titleItems="title"></TextInput>

      <Description :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'Description'"
        :placeholder='`请输入${item.title}`' :disabled="item.disabled" :title="item.title" :titleItems="title">
      </Description>

      <TextareaInput :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'TextareaInput'"
        :itemIndex="index" :disabled="!item.disabled" :placeholder='`请输入${item.title}`' :title="item.title"
        :titleItems="title"></TextareaInput>

      <SelectInput :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'SelectInput'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :titleItems="title">
      </SelectInput>


      <UserPicker :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'UserPicker'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :label="item.title"
        :titleItems="title">
      </UserPicker>


      <DeptPicker :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'DeptPicker'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :label="item.title"
        :titleItems="title">
      </DeptPicker>

      <FormItemRender :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'FormItemRender'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :titleItems="title">
      </FormItemRender>

      <DateTimeRange :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'DateTimeRange'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :titleItems="title">
      </DateTimeRange>

      <MapPicker :ApplyDetailList="ApplyDetailList" :itemId="item.id" v-if="item.name == 'MapPicker'"
        :options="item.props.options" :placeholder='`请输入${item.title}`' :title="item.title" :titleItems="title">
      </MapPicker>
    </view>
  </view>
</template>

<script>
import Description from './Description.vue'
import SelectInput from './SelectInput.vue'
import TextareaInput from './TextareaInput.vue'
import TextInput from './TextInput.vue'
import DeptPicker from "./DeptPicker.vue";
import FormItemRender from "./FormItemRender.vue";
import UserPicker from "./UserPicker.vue";
import DateTimeRange from './DateTimeRange.vue';
import MapPicker from './MapPicker.vue'
export default {
  props: {
    propsitem: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: null
    },
    ApplyDetailList: {
      type: Array,
      default: () => []
    },
  },
  components: {
    TextInput,
    Description,
    TextareaInput,
    SelectInput,
    UserPicker,
    DeptPicker,
    FormItemRender,
    DateTimeRange,
    MapPicker
  },
  data () {
    return {
      propsitemList: [],
    }
  },
  created () {
    let value = uni.getStorageSync('formData');
    let formItems = JSON.parse(value.formItems);
    formItems.forEach(item => {
      if (item.title == this.title) {
        uni.removeStorageSync(`${item.id}`);
      }
    })
    this.propsitemList = this.propsitem.items
  },
  mounted () {
  },
  methods: {
    // handleDeptSelect () {
    //   this.format = options.format
    //   this.currentPickerColumn = formItem // 保存当前操作的表单项
    //   setTimeout(() => {
    //     if (this.currentPickerColumn && this.publicIndex !== null) {
    //       const columnId = this.currentPickerColumn.id
    //       const storedValue = uni.getStorageSync(columnId);
    //       this.formDataTemp[columnId] = storedValue;
    //     }
    //   }, 500); // 延迟 0.5 秒（500 毫秒）
    // },
  }
}
</script>
<style lang="scss" scoped>
.containerSp {
  background-color: #ffffff;
}

.input-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;

  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .input,
  .textarea {
    padding: 10rpx;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 28rpx;
  }

  .textarea {
    height: 150rpx;
  }

  .number-input {
    padding: 10rpx;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 28rpx;
    color: #666;
  }
}
</style>
